<template>
    <div class="region region--subNav">
        <div class="column column--full">
            <div class="list">
                <li :class="[{ 'is-selected': tabIndex === index }, 'subnav__item']" v-for="(item, index) in listData"
                    :key="index" @click=changeTab(index)>
                    <router-link class="link">{{ item.name }} <i class="icon icon--external"
                            v-if="index === 3"></i></router-link>

                </li>
            </div>
        </div>
        <div class="region region--primary">
            <!-- 上左边 -->
            <div class="column column--aside">
                <div class="group group--elements left">
                    <div class="element element--list">
                        <header class="header header--secondary">
                            <h2 class="title">
                                <span class="label">{{ keyOneTitle }}</span>
                            </h2>
                        </header>
                        <ul class="list--kv">
                            <li class="kv__item">
                                <small class="label">Open</small>
                                <span class="primary ">{{ keyOneData.open }}</span>
                                <span class="secondary no-value"></span>
                            </li>
                            <li class="kv__item">
                                <small class="label">Day Range</small>
                                <span class="primary ">{{ keyOneData.low }} - {{ keyOneData.high }}</span>
                                <span class="secondary no-value"></span>
                            </li>
                            <!-- <li class="kv__item">
                                <small class="label">52 Week Range</small>
                                <span class="primary ">32,327.20 - 40,077.40</span>
                                <span class="secondary no-value"></span>
                            </li> -->
                        </ul>
                    </div>
                </div>
                <div class="group group--elements left" v-if="keyTwoTitle">
                    <div class="element element--list">
                        <header class="header header--secondary">
                            <h2 class="title">
                                <span class="label">{{ keyTwoTitle }}</span>
                            </h2>
                        </header>
                        <ul class="list--kv">
                            <li class="kv__item">
                                <small class="label">Open</small>
                                <span class="primary ">{{ keyTwoData.open }}</span>
                                <span class="secondary no-value"></span>
                            </li>
                            <li class="kv__item">
                                <small class="label">Day Range</small>
                                <span class="primary ">{{ keyTwoData.low }} - {{ keyTwoData.high }}</span>
                                <span class="secondary no-value"></span>
                            </li>
                            <!-- <li class="kv__item">
                                <small class="label">52 Week Range</small>
                                <span class="primary ">32,327.20 - 40,077.40</span>
                                <span class="secondary no-value"></span>
                            </li> -->
                        </ul>
                    </div>
                </div>
                <!-- 先不写 -->
                <div class="group group--elements right" style="display:none">
                    <div class="element element--table performance">
                        <header class="header header--secondary">
                            <h2 class="title">
                                <span class="label">Performance</span>
                            </h2>
                        </header>
                        <table class="table table--primary no-heading c2">
                            <tbody>
                                <tr class="table__row">
                                    <td class="table__cell">5 Day</td>
                                    <td class="table__cell">
                                        <ul class="content u-flex negative">
                                            <li class="content__item value ignore-color">-2.33%</li>
                                            <li class="content__item bar">
                                                <span class="graphic"
                                                    style="width: 2.3347950753674030803075411800%;"></span>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr class="table__row">
                                    <td class="table__cell">1 Month</td>
                                    <td class="table__cell">
                                        <ul class="content u-flex positive">
                                            <li class="content__item value ignore-color">2.17%</li>
                                            <li class="content__item bar">
                                                <span class="graphic"
                                                    style="width: 2.1703516462062853508802151200%;"></span>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr class="table__row">
                                    <td class="table__cell">3 Month</td>
                                    <td class="table__cell">
                                        <ul class="content u-flex negative">
                                            <li class="content__item value ignore-color">-0.16%</li>
                                            <li class="content__item bar">
                                                <span class="graphic"
                                                    style="width: 0.1582827511542414752188458200%;"></span>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr class="table__row">
                                    <td class="table__cell">YTD</td>
                                    <td class="table__cell">
                                        <ul class="content u-flex positive">
                                            <li class="content__item value ignore-color">3.66%</li>
                                            <li class="content__item bar">
                                                <span class="graphic"
                                                    style="width: 3.6616379483380280724821687400%;"></span>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr class="table__row">
                                    <td class="table__cell">1 Year</td>
                                    <td class="table__cell">
                                        <ul class="content u-flex positive">
                                            <li class="content__item value ignore-color">18.06%</li>
                                            <li class="content__item bar">
                                                <span class="graphic"
                                                    style="width: 18.058783724329036937868330070%;"></span>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="group group--elements left" style="margin-top:20px;">
                    <div class="element element--table overflow--table ByIndexGainers">
                        <header class="header header--secondary">
                            <h2 class="title">
                                <span class="label">{{ tcickerName }}</span>
                            </h2>
                        </header>
                        <table class="table table--primary  align--right">
                            <thead class="table__head">
                                <tr class="table__row">
                                    <th class="table__heading u-secondary">Name</th>
                                    <th class="table__heading">Last</th>
                                    <th class="table__heading">Chg</th>
                                    <th class="table__heading">Chg %</th>
                                </tr>
                            </thead>
                            <tbody class="table__body">
                                <tr class="table__row" v-for="item in moreTickerList" :key="item.uuid">
                                    <td class="table__cell w55 stock-positive"><a class="link">{{ item.symbol }}</a>
                                    </td>
                                    <td class="table__cell w15"><bg-quote class="ignore-color">{{ item.close
                                            }}</bg-quote></td>
                                    <td class="table__cell w15"><bg-quote
                                            :class="[item.change_ratio < 0 ? 'negative' : 'positive']">{{
                                                item.change_money
                                            }}</bg-quote></td>
                                    <td class="table__cell w15"><bg-quote
                                            :class="[item.change_ratio < 0 ? 'negative' : 'positive']">{{
                                                item.change_ratio
                                            }}%</bg-quote></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="column column--primary">
                <div class="element element--tabs">
                    <header class="header header--secondary">
                        <h2 class="title">
                            <span class="label"><a>Recent News</a></span>
                        </h2>
                    </header>
                    <div class="element__options">
                        <ul role="tablist" class="tabs full-width">
                            <button :class="[{ 'is-selected': btnIndex === idx }, 'tab__item']"
                                v-for="(it, idx) in btnData" :key="idx" @click="changeBtn(idx)">{{ it }}</button>
                        </ul>
                        <div class="j-tabPanes">
                            <futures :newsData="newsusData" v-if="isShow"></futures>
                        </div>
                    </div>
                </div>
                <div class="element element--tabs">
                    <button class="othnews">OTHER NEWS</button>
                    <div class="j-tab2 maxH">
                        <!-- <futures :newsData="otherNewList"></futures> -->
                        <div class="allcont" v-for="item in otherNewList" :key="item.uuid" @click="toPush(item)">
                            <h3 class="article__headline">{{ item.title }}</h3>
                            <p class="time">{{ formateDate(item.createTime) }} <span v-if="item.author">on{{
                                item.author
                                    }}</span></p>
                        </div>
                    </div>
                </div>
                <div class="element element--table major-indexes" style="display:none">
                    <header class="header header--secondary">
                        <h2 class="title">
                            <span class="label">Major Stock Indexes</span>
                        </h2>
                    </header>
                    <!-- 多个 -->
                    <div class="element element--table overflow--table Static">
                        <table class="table table--primary align--right">
                            <thead class="table__head">
                                <tr class="table__row">
                                    <th class="table__heading u-secondary">Key U.S.</th>
                                    <th class="table__heading">Last</th>
                                    <th class="table__heading">Chg</th>
                                    <th class="table__heading">Chg %</th>
                                </tr>
                            </thead>
                            <tbody class="table__body">
                                <tr class="table__row">
                                    <td class="table__cell w55"><a class="link">Dow Jones Industrial Average</a></td>
                                    <td class="table__cell w15"><bg-quote class="ignore-color">39,069.59</bg-quote></td>
                                    <td class="table__cell w15"><bg-quote class="positive">4.33</bg-quote></td>
                                    <td class="table__cell w15"><bg-quote class="positive">0.01%</bg-quote></td>
                                </tr>
                                <tr class="table__row">
                                    <td class="table__cell w55"><a class="link">Dow Jones Industrial Average</a></td>
                                    <td class="table__cell w15"><bg-quote class="ignore-color">39,069.59</bg-quote></td>
                                    <td class="table__cell w15"><bg-quote class="positive">4.33</bg-quote></td>
                                    <td class="table__cell w15"><bg-quote class="positive">0.01%</bg-quote></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 多个 -->
                </div>
            </div>
            <!-- 左下边 -->
            <div class="column column--aside">
            </div>
        </div>
    </div>
</template>
<script setup>
import futures from '../inverting/futures/futures.vue'
import homeRequest from "@/api/home.js";
import { formateDate } from '@/utils/timeHandle';
import { useRouter } from 'vue-router'
const router = useRouter()
const listData = ref([
    { name: 'Overview' },
    // { name: 'Charts' },
    // { name: 'Historical Quotes' }, 先注释
    // { name: 'Premium Tools' }
])
const props = defineProps(['label'])
const btnData = ref([
    'Sinopoly Watch',
    'Dow Jones'
])
const tabIndex = ref(0)
const btnIndex = ref(0)
const otherNewList = ref([])
onMounted(() => {
    getMarkList()
    getOtherList()
    getotherNews()
})
const toPush = (data) => {
    router.push({ name: 'NewDetail', params: { uuid: data.uuid, author: data.author } })
}
const changeTab = (index) => {
    tabIndex.value = index
}
//新闻的tab切换
const changeBtn = (idx) => {
    btnIndex.value = idx
    if (idx === 0) {
        getMarkList()
    } else {
        getauthorList()
    }
}
const newsusData = ref([])
const isShow = ref(false)
const getMarkList = () => {
    let data = {
        current: 1,
        size: 50,
        isImg: 1,
        key: '',
        company: props.label
    }
    homeRequest.newsData(data)
        .then((res) => {
            if (res.code === 0) {
                newsusData.value = res.data.records
                isShow.value = true
            }
        })
}
const getauthorList = () => {
    let data = {
        current: 1,
        size: 50,
        isImg: 1,
        key: '',
        author: 'Dow Jones Newswires'
    }
    homeRequest.newsData(data)
        .then((res) => {
            if (res.code === 0) {
                newsusData.value = res.data.records
                isShow.value = true
            }
        })
}
const getotherNews = () => {
    let data = {
        current: 1,
        size: 50,
        isImg: 1,
        key: '',
    }
    homeRequest.newsData(data)
        .then((res) => {
            if (res.code === 0) {
                otherNewList.value = res.data.records
            }
        })
}
const keyOneData = ref({})
const keyOneTitle = ref('')
const keyTwoData = ref({})
const keyTwoTitle = ref('')
const moreTickerList = ref([])
const tcickerName = ref('')
// 获取股票详情页其它数据
const getOtherList = () => {
    homeRequest.getstockOther({})
        .then((res) => {
            if (res.code === 0) {
                keyOneTitle.value = res.data.pos1.tabName
                if (res.data.pos1.stocks.length > 0) {
                    keyOneData.value = res.data.pos1.stocks[0]
                }
                if (res.data.pos2 !== null) {
                    keyTwoTitle.value = res.data.pos2.tabName
                    if (res.data.pos2.stocks.length > 0) {
                        keyTwoData.value = res.data.pos2.stocks[0]
                    }
                }
                if (res.data.pos3 !== null) {
                    if (res.data.pos3.stocks.length > 0) {
                        moreTickerList.value = res.data.pos3.stocks
                        tcickerName.value = res.data.pos3.tabName
                    }
                }

            }
        })
}
</script>
<style scoped lang='scss'>
@media (min-width: 1296px) {

    .region--cx,
    .region--intraday,
    .region--primary,
    .region--subNav {
        float: left;
        max-width: 960px;
    }

    .list {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
        width: 100%;
        padding: 0;
        background: #f3f3f3;
        color: #5a5e61;
        font-size: .75rem;
        border-bottom: 2px solid #202020;
        margin-bottom: 20px;

        .subnav__item {
            display: block;
            height: 40px;
            text-decoration: none;
            color: #2e2e2e;
            white-space: nowrap;

            .link {
                font: 800 0.75rem / 42px Lato, sans-serif;
                letter-spacing: .025em;
                text-transform: uppercase;
                padding: 0 10px;
                display: block;
            }

            .icon--external:before {
                content: "\e912";
            }
        }

        .is-selected,
        .is-selected .link {
            background: #202020;
            color: #fff;
        }

        .subnav__item:hover {
            color: #3677a8;
            cursor: pointer;
        }
    }
}

@media (min-width: 1296px) {
    .region--primary .column--aside {
        float: left;
        clear: left;
        max-width: 320px;
    }
}

@media (min-width: 1296px) {
    .region--primary .column--aside .group {
        max-width: none;
    }
}

.header--secondary .title {
    color: #3677a8;
}

.list--kv {
    margin-top: -15px;
    display: flex;
    justify-content: space-between;
    background: #fff;
    width: 100%;
    flex-flow: row wrap;

    .kv__item {
        width: calc(50% - 2px);
        padding: 10px 0 4px;
        border-bottom: 1px solid #e1e1e1;
        line-height: 1;

        .label {
            font: 400 0.625rem / 1.125 Lato, sans-serif;
            color: #6a6a6a;
            display: block;
            letter-spacing: .025em;
            margin-bottom: 2px;
            text-transform: uppercase;
        }

        .primary {
            font: 700 1rem / 1.375 Lato, monospace;
            display: inline-block;
            margin-bottom: 4px;
            color: #262626;
        }

        .secondary {
            font-size: .75rem;
            color: #6a6a6a;
            font-family: Lato, sans-serif;
        }
    }
}

.column--primary {
    max-width: 640px;
}

.j-tabPanes {
    max-height: 529px;
    overflow-y: auto;
    display: block;
    border: 1px solid #e1e1e1;
}

.j-tab2 {
    max-height: 325px;
    overflow-y: auto;
    display: block;
    border: 1px solid #e1e1e1;
}

.table__heading {
    white-space: nowrap;
}

.othnews {
    width: auto;
    padding: 0 20px;
    letter-spacing: .025em;
    color: #fff;
    background: #3677a8;
    box-shadow: none;
    line-height: 36px;
    margin-bottom: 10px;
}

.maxH {
    max-height: 327px;
}

.allcont {
    box-shadow: 0 -1px 0 0 #e1e1e1, inset 0 -1px 0 0 #e1e1e1;
    padding: 10px 0;
    margin: 0 10px;
    cursor: pointer;

    h3 {
        font-size: 0.938rem;
    }

    h3:hover {
        color: #3677a8;
    }

    .time {
        color: #6a6a6a;
        font-size: 0.75rem;
    }
}
</style>